<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%
    pageContext.setAttribute("ctx", request.getContextPath());
%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>${sysName}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="shortcut icon" href="${ctx}/resources/image/logo.png"/>
    <link rel="bookmark" href="${ctx}/resources/image/logo.png"/>
    <link rel="stylesheet" href="${ctx}/resources/layuiadmin/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="${ctx}/resources/layuiadmin/style/admin.css" media="all">
    <link href="${ctx}/resources/element/element.css" rel="stylesheet">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body class="layui-layout-body">

<div id="LAY_app" v-cloak>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <!-- 头部区域 -->
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item layadmin-flexible" lay-unselect>
                    <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
                        <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
                    </a>
                </li>
                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:;" layadmin-event="refresh" title="刷新">
                        <i class="layui-icon layui-icon-refresh-3"></i>
                    </a>
                </li>
            </ul>
            <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
                <li class="layui-nav-item layui-hide-xs" lay-unselect="">
                    <a href="javascript:;" layadmin-event="theme">
                        <i class="layui-icon layui-icon-theme"></i>
                    </a>
                </li>
                <li class="layui-nav-item layui-hide-xs" lay-unselect="">
                    <a href="javascript:;" layadmin-event="note">
                        <i class="layui-icon layui-icon-note"></i>
                    </a>
                </li>
                <li class="layui-nav-item layui-hide-xs" lay-unselect>
                    <a href="javascript:;" layadmin-event="fullscreen">
                        <i class="layui-icon layui-icon-screen-full"></i>
                    </a>
                </li>
                <li class="layui-nav-item" lay-unselect style="margin-right: 15px;">
                    <a href="javascript:;">
                        <cite>${user.userName}</cite>
                    </a>
                    <dl class="layui-nav-child">
                        <dd layadmin-event="updatePassword" style="text-align: center;">
                            <a>修改密码</a>
                        </dd>
                        <dd layadmin-event="logout" style="text-align: center;">
                            <a>退出登陆</a>
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>

        <div class="layui-side layui-side-menu">
            <div class="layui-side-scroll">
                <div class="layui-logo" lay-href="backstage/home">
                    <span>${sysName}</span>
                </div>

                <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu"
                    lay-filter="layadmin-system-side-menu">
                    <li data-name="home" class="layui-nav-item layui-nav-itemed">
                        <a id="sp" lay-href="backstage/home">
                            <i class="layui-icon layui-icon-home "></i>
                            <cite>首页</cite>
                            <span class="layui-nav-more"></span>
                        </a>
                        <dl class="layui-nav-child">
                            <dd class="layui-this">
                                <a lay-href="backstage/home">系统统计</a>
                            </dd>
                        </dl>
                        <dl class="layui-nav-child">
                            <dd class="layui-this">
                                <a lay-href="backstage/map">食安地图</a>
                            </dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item ">
                        <a href="javascript:;">
                            <i class="layui-icon layui-icon-template-1"></i>
                            <cite>基础数据
                            </cite>
                            <span class="layui-nav-more"></span></a>
                        <dl class="layui-nav-child">

                            <dd>
                                <a lay-href="backstage/supervisor">监管员管理</a>
                            </dd>
                            <dd>
                                <a lay-href="backstage/individual">经营户管理</a>
                            </dd>
                            <dd>
                                <a lay-href="backstage/individual/apply">经营户申请</a>
                            </dd>
                            <dd>
                                <a lay-href="backstage/notice">公告管理</a>
                            </dd>
                            <dd>
                                <a lay-href="backstage/check">检查管理</a>
                            </dd>
                            <dd>
                                <a lay-href="backstage/reform">跟进管理</a>
                            </dd>
                            <dd>
                                <a lay-href="backstage/foodProp">食安宣传</a>
                            </dd>
                            <dd>
                                <a lay-href="backstage/specialFood">特色菜品</a>
                            </dd>
                            <dd>
                                <a lay-href="backstage/information">消息管理</a>
                            </dd>
                            <dd>
                                <a lay-href="backstage/ledger">台账查询</a>
                            </dd>
                            <dd>
                                <a lay-href="backstage/complain">投诉管理</a>
                            </dd>

                            <dd>
                                <a lay-href="backstage/banner">banner管理</a>
                            </dd>
                        </dl>
                    </li>

                    <li class="layui-nav-item">
                        <a href="javascript:;">
                            <i class="layui-icon layui-icon-app"></i>
                            <cite>系统数据
                            </cite>
                            <span class="layui-nav-more"></span></a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a lay-href="backstage/district">区管理</a>
                            </dd>
                            <dd>
                                <a lay-href="backstage/town">镇管理</a>
                            </dd>
                            <dd>
                                <a lay-href="backstage/enum">参数管理</a>
                            </dd>
                        </dl>
                    </li>

                    <li class="layui-nav-item" v-if="${user.roleId} === 3">
                        <a href="javascript:;">
                            <i class="layui-icon layui-icon-set"></i>
                            <cite>系统设置</cite>
                            <span class="layui-nav-more"></span></a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a lay-href="backstage/sysuser">系统用户</a>
                            </dd>
                            <dd>
                                <a lay-href="backstage/version">更新管理</a>
                            </dd>
                        </dl>
                    </li>

                    <li class="layui-nav-item" v-if="${user.roleId} === 3">
                        <a href="javascript:;">
                            <i class="layui-icon layui-icon-video"></i>
                            <cite>监控配置</cite>
                            <span class="layui-nav-more"></span></a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a lay-href="backstage/noniconfig">监控分配</a>
                            </dd>
                            <dd>
                                <a lay-href="backstage/hikorigin">设备管理</a>
                            </dd>
                        </dl>
                    </li>
                    <span class="layui-nav-bar"></span>
                </ul>
            </div>
        </div>

        <!-- 页面标签 -->
        <div class="layadmin-pagetabs" id="LAY_app_tabs">
            <div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>
            <div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>
            <div class="layui-icon layadmin-tabs-control layui-icon-down">
                <ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
                    <li class="layui-nav-item" lay-unselect>
                        <a href="javascript:;"></a>
                        <dl class="layui-nav-child layui-anim-fadein">
                            <dd layadmin-event="closeThisTabs">
                                <a href="javascript:;">关闭当前标签页</a>
                            </dd>
                            <dd layadmin-event="closeOtherTabs">
                                <a href="javascript:;">关闭其它标签页</a>
                            </dd>
                            <dd layadmin-event="closeAllTabs">
                                <a href="javascript:;">关闭全部标签页</a>
                            </dd>
                        </dl>
                    </li>
                </ul>
            </div>
            <div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
                <ul class="layui-tab-title" id="LAY_app_tabsheader">
                    <li><i class="layui-icon layui-icon-home"></i></li>
                </ul>
            </div>
        </div>

        <!-- 主体内容 -->
        <div class="layui-body" id="LAY_app_body">
            <div class="layadmin-tabsbody-item layui-show">
                <iframe frameborder="0" class="layadmin-iframe"></iframe>
            </div>
        </div>

        <!-- 辅助元素，一般用于移动设备下遮罩 -->
        <div class="layadmin-body-shade" layadmin-event="shade"></div>
    </div>

    <!--修改密码-->
    <el-dialog title="修改密码" :visible.sync="editFormVisible" :close-on-click-modal="false" size="tiny" :modal="true"
               :append-to-body="true" width="450px">
        <el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm" :inline="false">
            <el-form-item label="原始密码" prop="oldPassword">
                <el-input v-model.trim="editForm.oldPassword" type="password" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="新设密码" prop="newPassword">
                <el-input v-model.trim="editForm.newPassword" type="password" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="重复密码" prop="repeatPassword">
                <el-input v-model.trim="editForm.repeatPassword" type="password" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" :loading="editLoading" @click="editSubmit">提交</el-button>
        </div>
    </el-dialog>
</div>

<script src="${ctx}/resources/js/jquery-1.12.4.min.js"></script>
<script src="${ctx}/resources/js/vue.min.js"></script>
<script src="${ctx}/resources/element/element.js"></script>
<script src="${ctx}/resources/layuiadmin/layui/layui.js"></script>
<script>
    // 模拟点击首页标签
    window.onload = function () {
        setTimeout(function () {
            document.getElementById("sp").click();
        }, 1500);
    }

    var app = new Vue({
        el: '#LAY_app',
        data: {
            editFormVisible: false,
            editLoading: false,
            editFormRules: {
                oldPassword: [{
                    required: true,
                    message: '请输入原始密码！'
                }],
                newPassword: [{
                    required: true,
                    message: '请输入新设密码！'
                }],
                repeatPassword: [{
                    required: true,
                    validator: this.validatePass
                }]
            },
            editForm: {
                oldPassword: '',
                newPassword: '',
                repeatPassword: ''
            },
            menuData: []
        },
        created: function () {
            // var _this = this;
            // $.ajax({
            // 	type: "get",
            // 	url: "${ctx}/resources/layuiadmin/json/menu/${menuName}.js?t=" + new Date(),
            // 	dataType: 'json',
            // 	success: function(res) {
            // 		_this.menuData = res.data;
            // 	},
            // 	complete: function() {
            // 		_this.init();
            // 	}
            // });
            this.init();
        },
        methods: {
            init: function () {
                var element;
                layui.config({
                    base: '${ctx}/resources/layuiadmin/' //静态资源所在路径
                }).extend({
                    index: 'lib/index' //主入口模块
                }).use(['index', 'element'], function () {
                    element = layui.element;
                    var i = (layui.$, layui.layer, layui.laytpl, layui.setter, layui.view, layui.admin);
                    i.events.logout = function () {
                        window.location.href = "${ctx}/user/logout";
                    };
                    i.events.updatePassword = function () {
                        if (app.$refs.editForm) {
                            app.$refs.editForm.resetFields();
                        }
                        ;
                        app.editForm = {
                            oldPassword: '',
                            newPassword: '',
                            repeatPassword: ''
                        };
                        app.editFormVisible = true;
                    };
                });
            },
            editSubmit: function () {
                this.$refs.editForm.validate(function (valid) {
                    if (valid) {
                        app.editLoading = true;
                        $.ajax({
                            url: "${ctx}/backstage/person/updatePassword",
                            data: app.editForm,
                            dataType: 'json',
                            type: 'post',
                            success: function (returndata) {
                                app.editLoading = false;
                                if (returndata.success) {
                                    app.$message({
                                        message: '修改成功!',
                                        type: 'success'
                                    });
                                    app.editFormVisible = false;
                                } else {
                                    app.$message({
                                        message: returndata.errors.message,
                                        type: 'error'
                                    });
                                }
                            }
                        });
                    }
                });
            }
        }
    });

    function validatePass(rule, value, callback) {
        if (value === '') {
            callback(new Error('请再次输入密码'));
        } else if (value !== app.editForm.newPassword) {
            callback(new Error('两次输入密码不一致!'));
        } else {
            callback();
        }
    };
</script>
</body>

</html>
